<template>
	<div class="goodRadio">
		<RadioTitle />
		<ul class="goodRadio-content">
			<li>
				<img class="goodRadio-img" src="../images/logo.webp" alt="" />
				<h5 class="goodRadio-title">魔法电台-音乐时间</h5>
				<p class="goodRadio-detail">哈利波特魔法点歌台</p>
			</li>
			<li>
				<img class="goodRadio-img" src="../images/logo.webp" alt="" />
				<h5 class="goodRadio-title">魔法电台-音乐时间</h5>
				<p class="goodRadio-detail">哈利波特魔法点歌台</p>
			</li>
			<li>
				<img class="goodRadio-img" src="../images/logo.webp" alt="" />
				<h5 class="goodRadio-title">魔法电台-音乐时间</h5>
				<p class="goodRadio-detail">哈利波特魔法点歌台</p>
			</li>
			<li>
				<img class="goodRadio-img" src="../images/logo.webp" alt="" />
				<h5 class="goodRadio-title">魔法电台-音乐时间</h5>
				<p class="goodRadio-detail">哈利波特魔法点歌台</p>
			</li>
			<li>
				<img class="goodRadio-img" src="../images/logo.webp" alt="" />
				<h5 class="goodRadio-title">民谣之声~每天听的歌~11111</h5>
				<p class="goodRadio-detail">【独家】DJ徐亮精选，陪你听听歌</p>
			</li>
		</ul>
		<RadioTitle />
		<ul class="goodRadioRanking">
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
			<li>
				<img class="goodRadioRanking-img" src="../images/logo.webp" alt="" />
				<div class="goodRadioRanking-content">
					<h5 class="goodRadioRanking-title">万能青年的家</h5>
					<p class="goodRadioRanking-singer">庞龙~</p>
					<p class="goodRadioRanking-data">共22期&nbsp;&nbsp; 订阅170976次</p>
				</div>
			</li>
		</ul>
		<!-- 分页器 -->
		<div class="gr-pagination">
			<el-pagination
				background
				layout="prev, pager, next"
				prev-text="&nbsp;<上一页"
				next-text="下一页>&nbsp;"
				:total="1000"
			/>
		</div>
	</div>
</template>

<script>
export default {
	name: "RadioRanking",
};
</script>

<script setup>
import RadioTitle from "./RadioTitle.vue";
</script>

<style>
.goodRadio {
	width: 1000px;
	margin: 10px auto;
	background-color: white;
}
.goodRadio-content,
.goodRadioRanking {
	margin: 20px 20px;
	display: flex;
	justify-content: space-between;
}
.goodRadioRanking {
	flex-wrap: wrap;
}

.goodRadio-img {
	width: 150px;
	height: 150px;
}
.goodRadio-title {
	margin: 13px 0 6px;
	width: 150px;
	line-height: 16px;
	font-size: 14px;
	font-weight: normal;
}
.goodRadio-detail {
	width: 150px;
	color: #999;
}

.goodRadioRanking li {
	display: flex;
	width: 448px;
	height: 120px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #999;
}
.goodRadioRanking-img {
	width: 120px;
	height: 120px;
}
.goodRadioRanking-content {
	margin-left: 20px;
}
.goodRadioRanking-title {
	font-size: 18px;
	line-height: 24px;
	margin: 16px 0 20px;
}
.goodRadioRanking-singer {
	font-size: 12px;
	color: #333;
	margin-bottom: 10px;
}
.goodRadioRanking-data {
	font-size: 12px;
	color: #999;
}
.gr-pagination {
	display: flex;
	justify-content: center;
}
</style>
